
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    <title>齐鲁新地标</title>

    <style>
        html,
        body,
        #mapContainer{
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }


    </style>
    <script src="ol.js"></script>
    <link rel="stylesheet" href="ol.css">
</head>

<body>
<div id="mapContainer"></div>

</body>
</div>

<script>
    var proj4490Def = new ol.proj.Projection({
        code: "EPSG:4490",
        extent: [-180, -90, 180, 90],
        units: "degrees",
        global: true,
        worldExtent: [-180, -90, 180, 90],
    });
    ol.proj.addProjection(proj4490Def);

    var proj4490 = ol.proj.get("EPSG:4490");

    var _defaultView = new ol.View({
        projection: proj4490,
        center: [119.00, 36.40],
        zoom: 7,
        minZoom: 7,
        varrainResolution: true
    });

    var size = ol.extent.getWidth(proj4490.getExtent()) / 256;

    var resolutions = new Array(21);
    var matrixIds = new Array(21);

    for (var z = 0; z < 21; ++z) {
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
    }

    _map = new ol.Map({
        view: _defaultView,
        target: "mapContainer",
        loadTilesWhileAnimating: true,
        loadTilesWhileInteracting: true,
    });

    var raster_url = "http://www.sdmap.gov.cn/tileservice/SdRasterPubMap?layer=SDRasterPubMap&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}";
    var vec_url = "http://www.sdmap.gov.cn/tileservice/SdPubMap?layer=SDPubMap&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}";
    var label_url = "http://www.sdmap.gov.cn/tileservice/SDRasterPubMapDJ?layer=SDRasterPubMapDJ&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}";


    var cn_vec_url = "http://t0.tianditu.gov.cn/vec_c/wmts?tk=c5bfb4123e08f2c08d869a31915d6420&layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}";
    var cn_vec_label_url = "http://t0.tianditu.gov.cn/cva_c/wmts?tk=c5bfb4123e08f2c08d869a31915d6420&layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}";
    var cn_raster_url = "http://t0.tianditu.gov.cn/img_c/wmts?tk=c5bfb4123e08f2c08d869a31915d6420&layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}";
    var cn_raster_label_url = "http://t0.tianditu.gov.cn/cia_c/wmts?tk=c5bfb4123e08f2c08d869a31915d6420&layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}";

    var cn_vec_layer = new ol.layer.Tile({
        minZoom: 6,
        maxZoom: 8,
        source: new ol.source.XYZ({
            url: cn_vec_url,
            projection: proj4490,
            tileGrid: new ol.tilegrid.createXYZ({
                origin: ol.extent.getTopLeft(proj4490.getExtent()),
                resolutions: resolutions,
                extent: proj4490.getExtent(),
            }),
        })
    });

    var cn_vec_label_layer = new ol.layer.Tile({
        minZoom: 6,
        maxZoom: 8,
        source: new ol.source.XYZ({
            url: cn_vec_label_url,
            projection: proj4490,
            tileGrid: new ol.tilegrid.createXYZ({
                origin: ol.extent.getTopLeft(proj4490.getExtent()),
                resolutions: resolutions,
                extent: proj4490.getExtent(),
            }),
        })
    });

    var cn_raster_layer = new ol.layer.Tile({
        minZoom: 6,
        maxZoom: 8,
        source: new ol.source.XYZ({
            url: cn_raster_url,
            projection: proj4490,
            tileGrid: new ol.tilegrid.createXYZ({
                origin: ol.extent.getTopLeft(proj4490.getExtent()),
                resolutions: resolutions,
                extent: proj4490.getExtent(),
            }),
        })
    });

    var cn_raster_label_layer = new ol.layer.Tile({
        minZoom: 6,
        maxZoom: 8,
        source: new ol.source.XYZ({
            url: cn_raster_label_url,
            projection: proj4490,
            tileGrid: new ol.tilegrid.createXYZ({
                origin: ol.extent.getTopLeft(proj4490.getExtent()),
                resolutions: resolutions,
                extent: proj4490.getExtent(),
            }),
        })
    });

    var vec_layer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: vec_url,
            projection: proj4490,
            tileGrid: new ol.tilegrid.createXYZ({
                origin: ol.extent.getTopLeft(proj4490.getExtent()),
                resolutions: resolutions,
                extent: proj4490.getExtent(),
            }),
        })
    });

    var raster_layer = new ol.layer.Tile({
        minZoom: 6,
        source: new ol.source.XYZ({
            url: raster_url,
            projection: proj4490,
            tileGrid: new ol.tilegrid.createXYZ({
                origin: ol.extent.getTopLeft(proj4490.getExtent()),
                resolutions: resolutions,
                extent: proj4490.getExtent(),
            }),
        })
    });

    var label_layer = new ol.layer.Tile({
        minZoom: 6,
        source: new ol.source.XYZ({
            url: label_url,
            projection: proj4490,
            tileGrid: new ol.tilegrid.createXYZ({
                origin: ol.extent.getTopLeft(proj4490.getExtent()),
                resolutions: resolutions,
                extent: proj4490.getExtent(),
            }),
        })
    });

    _map.addLayer(cn_vec_layer);
    _map.addLayer(cn_vec_label_layer);
    _map.addLayer(vec_layer);
</script>
</body>

</html>